<template>
  <InfoPanel>
    <!-- 项目详情 -->
    <!-- 项目列表 -->
    <ScrollTable :columns="columns" :tableData="allData" >
      <template #default="{ list }">
        <div
          @click="handleDetail(item)"
          class="scroll-row"
          v-for="item in list"
          :key="item.parkIndexCode"
        >
          <div class="scroll-row__item prj-name">{{ item.parkName }}</div>
          <div class="scroll-row__item">{{ item.stopAvailability }}</div>
          <div class="scroll-row__item">{{ item.utilizationNate }}</div>
          <!-- <div
            class="scroll-row__item"
            :class="col.className"
            v-for="col of columns"
            :key="col.prop"
          >
            {{ item[col.prop] }}
          </div> -->
        </div>
      </template>
    </ScrollTable>
  </InfoPanel>
</template>

<script setup>
import { useStore } from "@/store";
import ScrollTable from "@/components/scroll-table";
import InfoPanel from "@/components/info-panel";
import { onMounted, reactive, ref, watch ,computed} from "vue";
const storeObj = useStore();

import { defineProps } from "vue";
const props = defineProps({
  data: Object
});

const allData=ref([])

const columns = [
  { label: "停车场名称", prop: "parkName", className: "prj-name" },
  { label: "停车总数/余位总数", prop: "stopAvailability" },
  { label: "利用率", prop: "utilizationNate" },
];

watch(() => props.data, (newData) => {
      if (newData) {
        allData.value= newData.parking?.lists?.map(item=>{
          item.stopAvailability = item.parking_num+" / "+item.remaining_num
          item.utilizationNate =(item.remaining_num/newData?.parking_count*100).toFixed(2) + "%"
          return item
        })
      }
    });

</script>

<style lang="scss" scoped>
.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 12px;
  column-gap: 12px;
  .item-info {
    height: 40px;
    background: #0653d0a6;
    box-sizing: border-box;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }
}
.filter-box {
  position: absolute;
  right: 12px;
  top: 12px;
  .el-select {
    width: 300px;
  }
}
.scroll-row {
  cursor: pointer;
  font-size: 14px;
  color: #e9f7ff;
  height: 40px;
  display: flex;
  align-items: center;
  &:nth-child(2n) {
    background-color: transparent;
  }
  &:nth-child(2n + 1) {
    background-color: rgba(13, 76, 144, 0.5);
  }
  &__item {
    flex: 1;
    width: 0px;
    padding: 0px 23px;
    box-sizing: border-box;
  }
}
</style>

